<script lang="ts" setup>
import {reactive, ref} from 'vue'
import useThemeStore from '@/store/theme.ts'

defineOptions({
	name: 'RightMenu'
})

const themeStore = useThemeStore()
defineProps({
	headData: {
		type: Array,
		default: () => {
			return []
		}
	},
	defaultChecked: {
		type: Array,
		default: () => {
			return []
		}
	}
})

const defaultProps = reactive({
	children: 'childrenList',
	label: 'label'
})
const menuTree = ref()
const emit = defineEmits(['handleChange'])

const handleCheckChange = (data: any[], checked: boolean) => {
	emit('handleChange', {data, checked})
}
</script>

<template>
	<div class="right-menu">
		<el-popover
			placement="bottom-end"
			popper-class="table-menu-popver"
			trigger="click"
			width="200px"
		>
			<div class="right-menu-tree">
				<el-tree
					ref="menuTree"
					:data="headData"
					:default-checked-keys="defaultChecked"
					:props="defaultProps"
					check-strictly
					default-expand-all
					node-key="prop"
					show-checkbox
					@check-change="handleCheckChange"
				/>
			</div>
			<template #reference>
				<base-icon :color="themeStore.primary" class="setting" icon="Tools"/>
			</template>
		</el-popover>
	</div>
</template>

<style lang="scss" scoped>
.right-menu {
	height: 100%;
	position: absolute;
	right: 5px;
	top: 5px;

	&-tree {
		min-width: 136px;
		max-height: 350px;
		overflow: auto;
	}

	.setting {
		cursor: pointer;
	}
}
</style>
